<!DOCTYPE html>
<html>
<head>
    <title>Demo of ACE Editor</title>
    <!--导入js库-->
    <script src="./script/ace.js" type="text/javascript" charset="utf-8"></script>
    <script src="./script/ext-language_tools.js" type="text/javascript" charset="utf-8"></script>
    <script src="./script/mode-mysql.js" type="text/javascript" charset="utf-8"></script>
    <script src="./script/theme-github_dark.js" type="text/javascript" charset="utf-8"></script>
    <script src="./script/sql-formatter.min.js"></script>
</head>

<body>
    <!--【特别注意】代码输入框，务必设置高度，否则无法显示 -->
    <!--【特别注意】pre标签和textarea标签之间不要有空格或换行，这些元素都会当着编辑器内容的一部分，造成出现“开头多出一些空格字符”的怪现象！！！-->
    <pre id="code" class="ace_editor" style="min-height:400px;max-height: 1000px">
        <textarea class="ace_text-input">
         #include <cstdio>
         int main(){
             int n,m;
             scanf("%d %d",&n,&m);
             printf("%d",n+m);
             return 0;
         }
         </textarea>
    </pre>
    <button onclick="formatSQL()">Format SQL</button>
    <script charset="UTF-8">
        //初始化对象
        editor = ace.edit("code");

        //设置风格和语言（更多风格和语言，请到github上相应目录查看）
        // theme = "clouds"
        theme = "github_dark"
        // language = "c_cpp"
        language = "mysql"
        editor.setTheme("ace/theme/" + theme);
        editor.session.setMode("ace/mode/" + language);

        //字体大小
        editor.setFontSize(18);

        //设置只读（true时只读，用于展示代码）
        editor.setReadOnly(false);

        //自动换行,设置为off关闭
        editor.setOption("wrap", "free")

        //启用提示菜单
        ace.require("ace/ext/language_tools");
        editor.setOptions({
            enableBasicAutocompletion: true,
            enableSnippets: true,
            enableLiveAutocompletion: true,
            showFoldWidgets: true, // 显示折叠按钮
            foldStyle: 'markbegin' // 可以是 'markbegin', 'markbeginend', 'manual'
        });
        editor.setValue("select *  from user  where name = 'xx'")
        const value = editor.getValue();
        editor.getSession().setUseWrapMode(true);
        console.log(value);
        // 设置自定义补全的文字
        // 定义自定义补全项
        var customCompleter = {
            getCompletions: function (editor, session, pos, prefix, callback) {
                var completions = [
                    {
                        caption: "console.log",
                        value: "console.log()",
                        meta: "function"
                    },
                    {
                        caption: "forEach",
                        value: "array.forEach(function(item) {\n\tconsole.log(item);\n});",
                        meta: "snippet"
                    },
                    {
                        caption: "document.getElementById",
                        value: "document.getElementById('')",
                        meta: "function"
                    },
                    {
                        caption: "addEventListener",
                        value: "element.addEventListener('event', function() {\n\t// code\n});",
                        meta: "function"
                    },
                    {
                        caption: "ddone",
                        value: "会当凌绝顶,一层五开之径",
                        meta: "模板"
                    }
                ];

                callback(null, completions.map(function (c) {
                    return {
                        caption: c.caption,
                        value: c.value,
                        meta: c.meta
                    };
                }));
            }
        };

        // 将自定义补全器添加到编辑器
        ace.require("ace/ext/language_tools").addCompleter(customCompleter);

        function formatSQL() {
            const textValue = editor.getValue();
            const formattedSQL = sqlFormatter.format(textValue, {
                language: 'sql',  // 设置 SQL 语言方言
                indent: '    ',    // 设置缩进为4个空格
                uppercase: true,
                linesBetweenQueries: 2
            });
            editor.setValue(formattedSQL)
        }
    </script>

</body>
</html>
